import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
import { ref, computed } from 'vue';
import dayjs from 'dayjs';
/**
 * 请求按需加载
 * @param apiFn 发送请求函数
 * @returns  🚨 target 用于模板绑定
 */
// 监听
export const useObserver = (apiFn: () => void, flag: boolean) => {
  // 准备个 ref 用于绑定模板中的某个目标元素(DOM节点或组件)
  const target = ref(null);
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    console.log('是否进入可视区域', isIntersecting);
    if (isIntersecting) {
      // 当目标元素进入可视区域时，才发送请求
      setTimeout(() => {
        apiFn(); //这个函数就是传的获取数据的函数。
      }, 200);
      // 请求已发送，主动停止检查

      // 这里做一个判断，是否要连续进行检查。
      // stop停止检查，但懒加载数据时，下拉有数据就继续检查。
      if (flag) {
        // stop();
      } else {
        stop();
      }
    }
  });
  // 🚨返回 ref 用于模板绑定，建议返回对象格式支持解构获取
  return { target };
};

// 倒计时
// 处理倒计时
export const counterClock = (startTime = 60) => {
  // 倒计时秒数
  const count = ref(0);
  // resume  继续启动
  // pause   暂停(清理定时器)
  const { resume, pause } = useIntervalFn(
    () => {
      // 倒计时减少
      count.value--;
      // 倒计时结束
      if (count.value === 0) {
        pause();
      }
    },
    1000,
    // 不需要立即执行
    { immediate: false }
  );

  // 初始化启动函数
  const start = (startTime: number) => {
    // 倒计时
    count.value = startTime;
    resume();
  };

  // 相当于时间戳格式化。
  const countTime = computed(() => {
    return dayjs.unix(count.value).format('mm分ss秒');
  });

  // count   倒计时秒数
  // start   初始化启动
  // resume  继续启动
  // pause   暂停(清理定时器)
  return { count, resume, pause, start, countTime };
};

//
